<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.js"></script>
		<script src="js/react-dom.js"></script>
		<script src="js/browser.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/*.container{
				position: absolute;
				bottom: 0;
				top: 0;
				left: 0;
				right: 0;
				
				下面react这么写出问题了，因为点击重新设置state的num，整个把background刷新了，下面那俩就被屏蔽了
				background: url(img/00.jpg) no-repeat;
				background-size: cover;
				background-attachment: fixed;
				应该这么写
				background-repeat: no-repeat;
				background-size: cover;
				background-attachment: fixed;
				background-image: url(img/00.jpg);
			}*/
			.bg{
				margin: 200px auto;
				width: 696px;
			}
			.bg ul{
				list-style: none;
			}
			.bg ul li{
				display: inline-block;
				vertical-align: top;
				margin: 0 10px 10px 0;
			}
			.bg ul li:hover{
				opacity: .6;
			}
			.bg ul li img{
				width: 164px;
				height: 103px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		
		
		
		<script type="text/babel">
			var Skin = React.createClass({
				setStyles: function(){
					return ({
						position: 'absolute',
						bottom: 0,
						top: 0,
						left: 0,
						right: 0,
						backgroundRepeat: 'no-repeat',
						backgroundSize: 'cover',
						backgroundAttachment: 'fixed',
						backgroundImage: 'url(img/' + this.state.num + '.jpg)'
					});
				},
				
				changeBg: function(e){
					var id = e.target.getAttribute('data-id');
					console.log(id);
					this.setState({
						num: id
					});
				},
				
				getInitialState: function(){
					return {
						num: '00'
					};
				},
				
				createImageLi: function(){
					var arr = [];
					for(var i = 0; i < 8; i++){
						arr.push(
							<li key={i} onClick={this.changeBg}>
								<img src={"img/0" + i + ".jpg"} data-id={'0' + i} />
							</li>
						)
					};
					{/*return arr.map(function(value, index){
						return value;
					})*/}
					{/*为什么直接返回arr可以呢？难道返回数组放到box会直接用他内部的元素？*/}
					return arr;
				},
				
				render: function(){
					return (
						<div className="container" style={this.setStyles()}>
							<div className="bg">
								<ul>
									{this.createImageLi()}
								</ul>
							</div>
						</div>
					)
				}
			});
			
			
			ReactDOM.render(<Skin></Skin>, document.getElementById("box1"));
		</script>
	</body>
</html>
